Anar a l'índex

BOX MODEL

El Box model és segurament un dels temes més importants en CSS.

Ja hem vist en altres ocasions que una web es composa de caixes. Tenim un header, un logo, un menu amb diferents opcions i targetes amb altres continguts a dins, etc. Tot es redueix a caixes quadrades o rectangulars. Aquetes caixes tenen propietats que heu d'aprendre per construir un site web.

Una caixa qualsevol en la nostra web podria ser un header, footer, un logo o una imatge.

Una caixa també podria ser un text i ara analitzarem algunes propietats de les caixes amb aquest text

Cada caixa té quatre àrees/capes :

• La primera àrea és una àrea de contingut o content. El contingut pot ser text, imatge, etc.
• Al voltant de l'àrea de contingut, s'aplica l'àrea de farciment o padding (espai al voltant del contingut de l'element HTML).
• Al voltant de l'àrea de farciment, s'aplica l'àrea de la vora o border.
• Al voltant de l'àrea de la vora, s'aplica l'àrea de marge o margin (espai al voltant de la vora de l'element HTML).